<!--
 * @Author: windys
 * @Description: 文字内容
 * @Date: 2022-02-23 14:48:58
-->
<template>
  <div class="athour">
    <div class="left">
      <img :src="data.headUrl" alt="" srcset="" />
    </div>
    <div class="right">
      <div class="name">
        {{ data.spcolumnUserName }}
        <img src="@/assets/img/icon1.png" alt="" srcset="" />
        <img src="@/assets/img/icon2.png" alt="" srcset="" />
      </div>
      <div class="time">{{ data.createDate }}</div>
    </div>
  </div>

  <div class="small_title">
    <van-icon name="bookmark" />
    {{ data.articleAbstracts }}
  </div>

  <div class="content">
    <div v-html="data.articleContent"></div>
    <PayArticle :data="data" @buySucc="buySucc" />
  </div>

  <div class="footer">
    阅读：{{ data.articleReadCount }}次 &nbsp; 点赞：{{ data.praiseCount }}次
  </div>
</template>


<script >
import { defineComponent } from "vue";
import PayArticle from "./PayArticle.vue";
export default defineComponent({
  components: {
    PayArticle,
  },
  emits:["buySucc"],
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    const buySucc = () => {
      emit("buySucc");
    };
    return {
      buySucc
    };
  },
});
</script>


<style lang="scss" scoped>
.athour {
  display: flex;
  margin: 10px;
  .left {
    width: 50px;
    img {
      margin: 5px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  .right {
    width: 100%;
    margin-left: 20px;
    font-size: 14px;
    .name {
      font-size: 16px;
      margin-top: 5px;
      img {
        margin: 0 4px;
        position: relative;
        top: 2px;
        width: 15px;
        height: 15px;
      }
    }
    .time {
      font-size: 14px;
      color: #999;
      margin-top: 8px;
    }
  }
}
.small_title {
  font-size: 14px;
  color: #999;
  margin: 0 20px;
  padding: 10px 5px;
  border-radius: 5px;
  background: #e7f7ff;
  text-indent: 20px;
  position: relative;
  i {
    position: absolute;
    font-size: 18px;
    top: 0px;
    left: -35px;
    color: #3198ec;
  }
}
.content {
  font-size: 16px;
  padding: 0px 20px;
  overflow: hidden;
  position: relative;
  min-height: 300px;
}

.footer {
  font-size: 12px;
  margin: 20px;
  color: #999;
}
::v-deep(p) {
  word-break: break-all;
}
::v-deep(.content img) {
  width: 100% !important;
}
::v-deep(video) {
  width: 100% !important;
}
</style>